<template>
    <div class="echarts">
      <!-- <div :id="echarts_id" style="width: 400px;height: 400px;"></div> -->
      <div id="echarts_id" style="width: 100%;height: 100%;"></div>
    </div>
  </template>
   
  <script lang="js" setup>
  import { onMounted, watch,ref } from 'vue'
  import * as echarts from 'echarts' 
  import "echarts-gl"
  const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
  let echarts_id = ref('')
  const randomCoding = (res) => {
    var arr = 'abcdefjhijklmnopqrstuvwxyz0123456789'
    var char = ''
    for (var i = 0; i < 4; i++) {
      var num = parseInt(Math.random() * 36)
      char = char + arr[num]
    }
    echarts_id.value =
      'echarts_id' + Math.floor(Math.random() * (10000 - 1) + 1) + char
    // initCharts(echarts_id.value)
    initCharts('echarts_id')
  }
  // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
  function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
  
  // 计算
  let midRatio = (startRatio + endRatio) / 2;
  
  let startRadian = startRatio * Math.PI * 2;
  let endRadian = endRatio * Math.PI * 2;
  let midRadian = midRatio * Math.PI * 2;
  
  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }
  
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== 'undefined' ? k : 1 / 3;
  
  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  
  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  let hoverRate = isHovered ? 1.05 : 1;
  
  // 返回曲面参数方程
  return {
  
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32
    },
  
    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20
    },
  
    x: function (u, v) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
  
    y: function (u, v) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
  
    z: function (u, v) {
      if (u < - Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u);
      }
      return Math.sin(v) > 0 ? 1 * height : -1;
    }
  };
  };
  
  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
  
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
  
  // 为每一个饼图数据，生成一个 series-surface 配置
  for (let i = 0; i < pieData.length; i++) {
  
    sumValue += pieData[i].value;
  
    let seriesItem = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: true,
        k: k
      }
    };
  
    if (typeof pieData[i].itemStyle != 'undefined') {
  
      let itemStyle = {};
  
      typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
      typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
  
      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }
  
  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
  
    startValue = endValue;
  
    legendData.push(series[i].name);
  }
  
  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: 'green',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 70,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 70,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -0.5 : -5;
      },
    },
  });
  
  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: 'red',
    },
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 70,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 70,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -5 : -7;
      },
    },
  });
  series.push({
    name: 'mouseoutSeries',
    type: 'surface',
    parametric: true,
    wireframe: {
      show: false,
    },
    itemStyle: {
      opacity: 0.1,
      color: 'yellow',
  
    },
  
    parametricEquation: {
      u: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 70,
      },
      v: {
        min: 0,
        max: Math.PI,
        step: Math.PI / 70,
      },
      x: function (u, v) {
        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
      },
      y: function (u, v) {
        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
      },
      z: function (u, v) {
        return Math.cos(v) > 0 ? -7 : -7;
      },
    },
  });
  return series;
  }
  // 传入数据生成 option
  const optionsData = [
  
  {
    name: '越界',
    value: 28,
    itemStyle: {
      color: colors[1],
    },
  },
  
  {
    name: '电梯报警',
    value: 50,
    itemStyle: {
      color: colors[0],
    },
  },
  {
    name: 'PM2.5超标',
    value: 14,
    itemStyle: {
      color: colors[2],
    },
  },
  {
    name: '消防警报',
    value: 10,
    itemStyle: {
      color: colors[3],
    },
  },
  {
    name: '车辆违停',
    value: 5,
    itemStyle: {
      color: colors[4],
    },
  }
  ];
  
  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);

//添加连线标签
//   series.push({
//   name: 'pie2d',
//   type: 'pie',
//   label: {
//     opacity: 1,
//     fontSize: 13,
//     lineHeight: 20,    
//     textStyle: {
//       fontSize: 14,
//     },    
//   },
//     labelLine: {
//       length: 50,
//       length2: 0,
//       // showAbove: true,
//       // minTurnAngle: 0,
//       // maxSurfaceAngle: 180,
//       lineStyle: {
//         width: 2,
//         type: [3, 5],
//         color: '#2beaf9',
//         // cap: 'round',
//         // join:'round'
//       },
//     },
  
//     labelLayout: {
//       hideOverlap: false,
//       moveOverlap: 'shiftY',
//       align: 'center',
//       // 默认的标签垂直对齐
//       verticalAlign: 'bottom',
//       // rotate: 90
//       // draggable: true,
//       // x: '20%',
//       // x: 'center',
//       // dx: 50,
//       // y: '10%',
//       // dy: 20,
//       // LinePoints: [[20,50], [20,50], [20,50]]
//     },
//   startAngle: 0, //起始角度，支持范围[0, 360]。
//   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
//   radius: ['20%', '50%'],
//   center: ['50%', '50%'],
//   data: optionsData,
//   itemStyle: {
//     opacity: 0,
//   },
//   });
  
  const initCharts = (ID) => {
    const client = document.getElementById(ID)
  
    var myChartCA7 = echarts.init(client)
    var option
    // 准备待返回的配置项，把准备好的 legendData、series 传入。
    option = {
      color: ["#2beaf9", "darkgrey", "yellow", "red",'green'],
      legend: {
        icon: 'circle',
        // tooltip: {
        //   show: true,
        // },
        itemWidth: 10,   // 每个图例标记的宽度
        itemHeight: 10,  // 每个图例标记的高度      
        textStyle: {
            color: '#333'  // 文本颜色
        },
        itemGap: 15,      // 图例之间的间距
        orient: 'horizontal',  // 水平布局
        
        itemStyle: {
            borderColor: 'red',  // 边框颜色          
            // 设置圆角样式
            borderRadius: [5, 5, 0, 0]  // 左上、右上、右下、左下四个角分别设置不同的半径值
        },
        data: ['电梯报警', '越界', '车辆违停', 'PM2.5超标','消防警报'],
        right: '5%',
        top: 'middle',
        orient: 'vertical',
        textStyle: {
          color: "#",
          fontSize: 14,
          rich: {
            text: {
              // color:'#fff',
              fontSize: 14,
            },
            number: {
              fontSize: 16
            }
          }
        },
        data: optionsData,
        formatter: (name) => {
          if (optionsData.length) {
            const item = optionsData.filter((item) => item.name === name)[0];
            return `{text|${name}}    {number|${item.value}}`;
          }
        },
      },
  
      animation: true,
      tooltip: {
        formatter: params => {
          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
            return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value + ''}`;
          }
        },
        textStyle: {
          fontSize: 18
        },
      },
      title: {
        x: 'center',
        top: '20',
        textStyle: {
          color: '#fff',
          fontSize: 22,
        },
      },
      labelLine: {
        show: true,
        lineStyle: {
          type: 'dash',
          color: '#2beaf9',
          dashOffset: 5,
          cap: 'round'
        },
      },
      label: {
        show: true,
        position: 'outer',
        alignTo: 'labelLine',
        formatter: '{b} {d}%',        
  
      },
      xAxis3D: {
        min: -1,
        max: 1,
      },
      yAxis3D: {
        min:-1,
        max: 1,
      },
      zAxis3D: {
        min: -1,
        max: 1,
      },
      grid3D: {
        show: false,
        boxHeight: 0.5,
        //top: '30%',
        left:'-20%',
        bottom: '30%',
        // environment: '#021041',
        viewControl: {
          rotateSensitivity: 60,
          distance: 130,
          alpha: 20,
          beta: 10,
          autoRotate: false, // 自动旋转
        }
      },
      series: series,
    };
  
    const clientWidth = client.clientWidth
    const clientHeight = client.clientHeight
  
    myChartCA7.setOption(option, true)
  
    window.onresize = function () {
      myChartCA7.resize()
    }
    window.addEventListener('resize', function () {
      myChartCA7.resize()
    })
  }
  onMounted(() => {
    randomCoding()
    // initCharts()
  })
  
  </script>
  <style scoped lang="scss">
  .echarts {
    height: 100%;
  }
  </style>
  